<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


<h1 class="title">Consultar Rutas de Escape</h1>
<hr>
<p class="meta"></p>
<div class="entry">
    <center>
        <form action="#" id="consultarRutaEscapeForm">
            <table>
                <tbody>
                <br>
                <tr>
                    <td>Nombre del Edificio:</td>
                    <td>
                        <select name="nombreEdificio" id="edificios" class="param"></select>
                    </td>
                </tr>
                <tr>
                    <td>Identificador del piso:</td>
                    <td>
                        <select id="pisos" name="piso" class="param"></select>
                    </td>
                </tr>
                <tr>
                    <td>Usada:</td>
                    <td><input name="usada" id="usada" class="param"/></td>
                </tr>
                </tbody>
            </table>
            <br>
            <br>
            <html:button property="" value="  Mostrar Todo  " onclick="javascript:consultarRutaEscape();"/>
            <html:button property="" styleId="atras" value="  Atrás  "/>
        </form>
        <br><div style="clear: both;">&nbsp;</div>

        <%-- AQUI COMIENZA LA IMPRESION DE LA TABLA DE RESULTADOS --%>
        <div id="tableResult" style="display: none;">

            <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable" >
                <thead>
                    <tr>
                <th><h14>Sede</h14></th>
                <th><h14>Edificio</h14></th>
                <th><h14>Piso</h14></th>
                <th><h14>Fecha de Revision</h14></th>
                <th><h14>Usada</h14></th>
                <th><h14>Plano</h14></th>
                </tr>
                </thead>
                <tbody id="resultado">
                </tbody>
            </table>
            <div style="clear: both;">&nbsp;</div>
            <%@ include file='Templates/paginasTabla.jsp' %>
        </div>
    </center>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript" >
    $(function(){
        listEdificios();
    });

    $('#edificios').change(function(){
        ed = $('#edificios :selected').val();
        if(ed == "") return;
        getPisosSelect(ed);
        $('#pisos').prepend("<option value='' selected></option");
    });

    $('#limit').change(function(){
        offset = 0;
    });
    $('.param').change(consultarRutaEscape);

    var edificio = "";
    var piso = "";
    var usada = "";

    // Estas no cambian
    var offset;
    var tam;
    var limit;

    function consultarRutaEscape(){
        $.ajax({
            method: 'GET',
            url: "consultarRutaEscape.do",
            data: {
                edificio: $('#edificios :selected').val(),
                piso: $('#pisos :selected').val(),
                usada:$('#usada').val(),
                limit: $('#limit :selected').val(), offset: offset},
            dataType: 'json',
            success: processConsultaRutaEscape
        });

        // Aqui se decide las paginas: Actual y totales (NO CAMBIA)
        if(limit!=0){
            $("#currentpage").empty();
            $("#pagelimit").empty();
            $("#currentpage").append((offset/limit)+1);
            $("#pagelimit").append(Math.floor((tam-1)/limit)+1)
        }
    }

    function processConsultaRutaEscape(data){
        if(limit != 0){
            $('#resultado').empty();
            $.each(data.consultarRutaEscape , function(i,item){
                imagen = item.ruta;
                //var path = senal.substring(senal.lastIndexOf("/"), senal.length);
                file = "<td><div style='text-align:center;' >"+
                "<a href='style/images/Mapas/RutasEscape/"+imagen+"' target='_blank'><img src='style/images/Mapas/viewRutasE.gif' alt='Plano' width='20' height='20'></a>";
                tr = $('<tr>');
                tr.append($('<td>').append(item.sede));
                tr.append($('<td>').append(item.edificio));
                tr.append($('<td>').append(item.piso=='0'?'PB':item.piso));
                tr.append($('<td>').append(item.fecha));
                tr.append($('<td>').append(item.usada));
                tr.append($('<td>').append(file));

                $('#resultado').append(tr);
            });
            $('#resultado :odd').css('background', '#ecf2f6');
            $('#resultado :even').css('background', '#fff');
        }
        else{
            alert("limit cero");
            $.each(data.consultarRutaEscape , function(i,item){
                tam = parseInt(item.tam);
            });
            limit = 10;
        }
        $('#tableResult').css('display','block');
    }

    // Se fijan los alcances de las flechas primera, última, siguiente y anterior
    function setOffset(i, completo){
        newOffset = offset;
        if(i==-1){
            if(completo) newOffset = 0;
            else if(offset >= limit) newOffset -= limit;
        } else {
            if(completo) newOffset = Math.floor((tam-1)/limit)*limit
            else if(offset < tam-limit) newOffset += limit;
        }
        if(newOffset!=offset){
            offset = newOffset;
            consultarRutaEscape();
        }
    }
</script>

<script type="text/javascript">
    // Este script determina que la primera vez que se ve la tabla (sin resultados),
    // el numero de paginas y la pagina actual serán 1. (NO CAMBIA)
    if(limit == 0){
        $("#currentpage").append(1);
        $("#pagelimit").append(1)
    }
</script>
